<template>
    <div>
        <div id="container"></div>
    </div>
</template>

<script>
import { Graph } from '@antv/x6';

export default {
    name: 'AntVX6',
    data() {
        return {
            x6Data: {
                // 节点
                nodes: [
                    {
                        id: 'node1', // String，可选，节点的唯一标识
                        x: 40,       // Number，必选，节点位置的 x 值
                        y: 40,       // Number，必选，节点位置的 y 值
                        width: 80,   // Number，可选，节点大小的 width 值
                        height: 40,  // Number，可选，节点大小的 height 值
                        label: '开始标签', // String，节点标签
                    },
                    {
                        id: 'node2', // String，节点的唯一标识
                        x: 160,      // Number，必选，节点位置的 x 值
                        y: 180,      // Number，必选，节点位置的 y 值
                        width: 80,   // Number，可选，节点大小的 width 值
                        height: 40,  // Number，可选，节点大小的 height 值
                        label: '结束标签', // String，节点标签
                    },
                ],
                // 边
                edges: [
                    {
                        source: 'node1', // String，必须，起始节点 id
                        target: 'node2', // String，必须，目标节点 id
                    },
                ],
            }
        }
    },
    mounted() {
        this.antVX6Init()
    },
    methods: {
        antVX6Init() {
            const graph = new Graph({
                container: document.getElementById('container'),
                width: 400,
                height: 200,
            })
            graph.fromJSON(this.x6Data)
        }
    }

}
</script>

<style lang="less" scoped>
#container{
    border: 1px solid #000;
}
</style>